葫芦的运维日志

下一篇 搜索 上一篇

---

按如下添加，home页和about页就复用了,oderingguide delivery history

App.vue添加如下：

    <div class="container">
      <div class="row">
        <div class="col-sm-12 col-md-4">
          <router-view name="oderingGuide"></router-view>
        </div>
        <div class="col-sm-12 col-md-4">
          <router-view name="oderingGuide"></router-view>
        </div>
        <div class="col-sm-12 col-md-4">
          <router-view name="oderingGuide"></router-view>
        </div>
      </div>
    </div>

router.js添加复用规则：

  {path: '/', components: {

    default:Home,
      'oderingGuide':OderingGuide,
      'delivery':Delivery,
      'history':History
    }

    },

router.js

import Home from './components/Home'
import Menu from './components/Menu'
import Admin from './components/Admin'
import About from './components/about/About'
import Login from './components/Login'
import Register from './components/Register'

//二级路由
import Contact from './components/about/Contact'
import Delivery from './components/about/Delivery'
import History from './components/about/History'
import OderingGuide from './components/about/OderingGuide'

// 三级路由
import Person from './components/about/contact/PersonName'
import PhoneNumber from './components/about/contact/Phone'


export const routes = [
  {path: '/', components: {

    default:Home,
      'oderingGuide':OderingGuide,
      'delivery':Delivery,
      'history':History
    }

    },
  {
    path: '/menu', name: "menulink", component: Menu, beforeEnter: (to, from, next) => {
      alert("非登录状态不能进入此页面！");
      next('/login');
    }
  },
  {path: '/admin', name: "adminlink", component: Admin},
  {
    path: '/about', name: "aboutlink", redirect: '/about/contact', component: About, children: [
      {
        path: '/about/contact', name: "contactLink", redirect: '/personname', component: Contact, children: [
          {path: '/phone', name: "phoneNumber", component: PhoneNumber},
          {path: '/personname', name: "personName", component: Person}

        ]
      },
      {path: '/history', name: "historyLink", component: History},
      {path: '/delivery', name: "deliveryLink", component: Delivery},
      {path: '/oderingguide', name: "oderingGuideLink", component: OderingGuide},
    ]
  },
  {path: '/login', name: "loginlink", component: Login},
  {path: '/register', name: "registerlink", component: Register},
  {path: "*", redirect: '/'}
]

App.vue

<template>
  <div id="app">
    <div class="container">
      <app-header></app-header>
    </div>
    <div class="container">
      <router-view></router-view>
    </div>
    <br>
    <div class="container">
      <div class="row">
        <div class="col-sm-12 col-md-4">
          <router-view name="oderingGuide"></router-view>
        </div>
        <div class="col-sm-12 col-md-4">
          <router-view name="oderingGuide"></router-view>
        </div>
        <div class="col-sm-12 col-md-4">
          <router-view name="oderingGuide"></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Header from './components/Header'

  export default {
    components: {
      "app-header": Header,
    }
  }
</script>
<style>
</style>

 

 

葫芦的运维日志

打赏

上一篇 搜索 下一篇